/**
 * pro-form-render -- 表单配置
 * @author SPY
 * @url 语雀:https://www.yuque.com/study365
 */

import React, { useEffect, memo } from 'react';
import { Form, Select, Radio } from 'antd';
import { connect, getDvaApp } from 'umi';

const { Item } = Form;
const { Option } = Select;

const FormSetting = ({ form, dispatch }) => {
  useEffect(() => {
    form.setFieldsValue({ colSpan: 1, submitter: false, size: 'middle' });
    window.g_app = getDvaApp();
  }, []);

  // 表单值发生改变
  const onValuesChange = (changedValues, allValues) => {
    if (dispatch) {
      dispatch({
        type: 'proForm/save',
        payload: {
          formParams: allValues,
        },
      });
    }
  };

  return (
    <Form
      size="small"
      layout="vertical"
      form={form}
      onValuesChange={onValuesChange}
    >
      <Item name="colSpan" label="整体布局">
        <Select placeholder="默认一行一列">
          <Option key={1} value={1}>
            一行一列
          </Option>
          <Option key={2} value={2}>
            一行二列
          </Option>
          <Option key={3} value={3}>
            一行三列
          </Option>
        </Select>
      </Item>
      <Item name="submitter" label="显示提交/重置">
        <Radio.Group>
          <Radio key={true} value={true}>
            显示
          </Radio>
          <Radio key={false} value={false}>
            不显示
          </Radio>
        </Radio.Group>
      </Item>
      <Item name="size" label="组件尺寸">
        <Radio.Group>
          <Radio key="large" value="large">
            大
          </Radio>
          <Radio key="middle" value="middle">
            中
          </Radio>
          <Radio key="small" value="small">
            小
          </Radio>
        </Radio.Group>
      </Item>
    </Form>
  );
};
export default connect(({ proForm }) => ({
  ...proForm,
}))(memo(FormSetting));
